import Taro, {Component, Config} from '@tarojs/taro'
import {Image, View} from '@tarojs/components'
import { SDBody, SDSlide } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import './index.less'
import icAnnouncement from '../../../../images/ic_announcement.png'
import icComment from '../../../../images/ic_comment.png'
import icNotice from '../../../../images/ic_notice.png'
import icOrder from '../../../../images/ic_order.png'

export default class MessageListPage extends Component {

  config: Config = {
    navigationBarTitleText: '消息'
  }

  previewSlideID: string = ''

  render () {
    return (
      <SDBody sd-class='container'>
        <View className={`cell-item border-bottom_1px`}>
          <SDSlide
            id={`compsSlide_ID0`}
            slideWidth={160}
            height={180}
            onWillEditing={this.onSlideWillEditing.bind(this, 0)}
            renderSlide={
              <View className='cell-btn_outer'>
                <View className="btn-content" onClick={this.onDeleteBtnTaped.bind(this, 0)}>删除</View>
              </View>
            }
          >
            <View className="cell-content" onClick={this.onCellTaped.bind(this, 0)}>
              <View className="img-content">
                <Image className="img-icon" src={icOrder} mode='aspectFill' lazyLoad></Image>
              </View>
              <View className="cell-right">
                <View className="cell-rtop">
                  <View className="cell_rleft">订单通知</View>
                  <View className="cell_rright">16:46</View>
                </View>
                <View className="cell_rbottom">
                  您的订单1234567已发货，请注意查收！ 点击此处查看订单详情。
                </View>
              </View>
            </View>
          </SDSlide>
        </View>

        <View className={`cell-item border-bottom_1px`}>
          <SDSlide
            id={`compsSlide_ID1`}
            slideWidth={160}
            height={180}
            onWillEditing={this.onSlideWillEditing.bind(this, 1)}
            renderSlide={
              <View className='cell-btn_outer'>
                <View className="btn-content" onClick={this.onDeleteBtnTaped.bind(this, 1)}>删除</View>
              </View>
            }
          >
            <View className="cell-content" onClick={this.onCellTaped.bind(this, 1)}>
              <View className="img-content">
                <Image className="img-icon" src={icComment} mode='aspectFill' lazyLoad></Image>
              </View>
              <View className="cell-right">
                <View className="cell-rtop">
                  <View className="cell_rleft">评论回复</View>
                  <View className="cell_rright">08-08 09:19</View>
                </View>
                <View className="cell_rbottom">
                  您对迪士尼裤子进行了评价，平台给予了回复。
                </View>
              </View>
            </View>
          </SDSlide>
        </View>

        <View className={`cell-item border-bottom_1px`}>
          <SDSlide
            id={`compsSlide_ID2`}
            slideWidth={160}
            height={180}
            onWillEditing={this.onSlideWillEditing.bind(this, 2)}
            renderSlide={
              <View className='cell-btn_outer'>
                <View className="btn-content" onClick={this.onDeleteBtnTaped.bind(this, 2)}>删除</View>
              </View>
            }
          >
            <View className="cell-content" onClick={this.onCellTaped.bind(this, 2)}>
              <View className="img-content">
                <Image className="img-icon" src={icNotice} mode='aspectFill' lazyLoad></Image>
              </View>
              <View className="cell-right">
                <View className="cell-rtop">
                  <View className="cell_rleft">系统通知</View>
                  <View className="cell_rright">08-08 09:19</View>
                </View>
                <View className="cell_rbottom">
                  平台将于明天8:00进行系统更新维护，给您带来 不便，敬请谅解！
                </View>
              </View>
            </View>
          </SDSlide>
        </View>


        <View className={`cell-item border-bottom_1px`}>
          <SDSlide
            id={`compsSlide_ID3`}
            slideWidth={160}
            height={180}
            onWillEditing={this.onSlideWillEditing.bind(this, 3)}
            renderSlide={
              <View className='cell-btn_outer'>
                <View className="btn-content" onClick={this.onDeleteBtnTaped.bind(this, 3)}>删除</View>
              </View>
            }
          >
            <View className="cell-content" onClick={this.onCellTaped.bind(this, 3)}>
              <View className="img-content">
                <Image className="img-icon" src={icAnnouncement} mode='aspectFill' lazyLoad></Image>
              </View>
              <View className="cell-right">
                <View className="cell-rtop">
                  <View className="cell_rleft">公告</View>
                  <View className="cell_rright">08-08 09:19</View>
                </View>
                <View className="cell_rbottom">
                  炎炎夏日，火热来袭，童装多款高端品牌5折优 惠销售中。
                </View>
              </View>
            </View>
          </SDSlide>
        </View>

        <View className={`cell-item border-bottom_1px`}>
          <SDSlide
            id={`compsSlide_ID4`}
            slideWidth={160}
            height={180}
            onWillEditing={this.onSlideWillEditing.bind(this, 4)}
            renderSlide={
              <View className='cell-btn_outer'>
                <View className="btn-content" onClick={this.onDeleteBtnTaped.bind(this, 4)}>删除</View>
              </View>
            }
          >
            <View className="cell-content" onClick={this.onCellTaped.bind(this, 4)}>
              <View className="img-content">
                <Image className="img-icon" src={icNotice} mode='aspectFill' lazyLoad></Image>
              </View>
              <View className="cell-right">
                <View className="cell-rtop">
                  <View className="cell_rleft">拜访评价通知</View>
                  <View className="cell_rright">08-08 09:19</View>
                </View>
                <View className="cell_rbottom">
                  BD对您进行了拜访，你也来评价一下BD吧。
                </View>
              </View>
            </View>
          </SDSlide>
        </View>
      </SDBody>
    )
  }

  endEditingPreCell = () => {
    if (this.previewSlideID.length > 0) {
      let comps = (this.$scope.selectComponent(`#${this.previewSlideID}`) || {}).$component
      comps && comps.endEditing()
      this.previewSlideID = ''
    }
  }

  onSlideWillEditing = (index: number) => {
    this.endEditingPreCell()
    this.previewSlideID = `compsSlide_ID${index}`
  }

  onDeleteBtnTaped = (index: number, e) => {
    e.stopPropagation()
    let currentSlideID = `compsSlide_ID${index}`
    console.log(currentSlideID)
  }

  onCellTaped = (index, e) => {
    e.stopPropagation()
    this.endEditingPreCell()

    let currentSlideID = `compsSlide_ID${index}`
    let comps = (this.$scope.selectComponent(`#${currentSlideID}`) || {}).$component
    if (comps && comps.isInEditing()) {
      comps.endEditing()
      return
    }
    if (this.previewSlideID.length > 0) { return }
    if (index == 0) {
      this.gotoOrderDetailPage()
    } else if (index == 1) {
      this.gotoRepostDetailPage()
    } else if (index == 2) {
      this.gotoArticleDetailPage()
    } else if (index == 3) {
      this.gotoArticleDetailPage()
    } else {
      this.gotoVisitFeedbackPage()
    }
  }

  gotoOrderDetailPage = () => {     // 订单详情
    SDUtils.jumpTo('/pages/order/detail/index')
  }

  gotoRepostDetailPage = () => {   // 平台评论回复
    SDUtils.jumpTo('/pages/other/message/repost/index')
  }

  gotoArticleDetailPage = () => {  // 文章详情
    SDUtils.jumpTo('/pages/discover/detail/index', {type: 'TEXT'})
  }

  gotoVisitFeedbackPage = () => { // 拜访反馈
    SDUtils.jumpTo('/pages/other/message/feedback/index')
  }
}
